<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add">
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
// nanoid 是一个函数 直接根据自己电脑所独有的特性产生一个唯一的字符串
export default {
  name: 'MyHeader',
  // props: ['addTodo'],
  data() {
    return {
      title: ''
    }
  },
  methods: {
    // add(e) {
    //   if(!e.target.value)
    //     return
    //   // 将用户的输入包装成一个头都对象
    //   const todo = {
    //     id: nanoid(),
    //     title: e.target.value,
    //     done: false
    //   }
    //   this.addTodo(todo)
    //   e.target.value = ''// 添加过后清空输入框
    //   // console.log(todo);// done: false id: "DtnHVkndDkj443r8y1tfo" title: "看电视"
    // }
    add() {
      if(!this.title) {
        return
      }
      const todo = {
        id: nanoid(),
        title: this.title,
        done: false
      }
      this.$emit('addTodo', todo)
      this.title = ''      
    }
  },
}
</script>

<style scoped>
/*header*/
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>
